
<template>
    <view class="progressBox">
        <view class="loading-warp">
            <canvas class="canvas" canvas-id="canvasCircle"></canvas>
            <canvas class="canvas-mask" canvas-id="canvasRing"></canvas>
            <view class="rate">{{ step }}%</view>
        </view>
        <!-- <button @click="handeleClick">11</button> -->
    </view>
</template>
<script>
export default {

    data() {
        return {
            step: 0,
        }
    },
    methods: {
        drawing(s, e) {
            var context = uni.createCanvasContext('canvasRing', this);
            context.setLineWidth(7);
            context.setStrokeStyle('#0052D9');
            context.setLineCap('round');
            context.beginPath();
            context.arc(56, 56, 45, s, e, false);
            context.stroke();
            context.draw();
        },
        handeleClick() {
            this.step = 100;
            let endAngle = 100 * 2 * Math.PI / 100 + 1.5 * Math.PI;
            this.drawing(1.5 * Math.PI, endAngle);
        },
        drawProgress() {
            var cxt = uni.createCanvasContext('canvasCircle', this);
            cxt.setLineWidth(7);
            cxt.setStrokeStyle('#eaeaea');
            cxt.setLineCap('round');
            cxt.beginPath();
            cxt.arc(56, 56, 45, 0, 2 * Math.PI, false);
            cxt.stroke();
            cxt.draw();
            //加载动画
            var steps = 1, startAngle = 1.5 * Math.PI, endAngle = 0, speed = 100, sec = 100;
            let interval = setInterval(() => {
                if (steps <= 99) {
                    this.step = steps;
                    endAngle = steps * 2 * Math.PI / speed + startAngle;
                    this.drawing(startAngle, endAngle);
                    steps++;
                } else {
                    clearInterval(interval);
                }
            }, 10);
        },
    },
    mounted() {
        // this.drawProgress()
    },
}
</script>
<style lang="scss" >
.progressBox {
    margin-top: 30rpx;
    margin-bottom: 16rpx;
}

.loading-warp {
    z-index: 0;
    position: relative;
    margin: auto;
    width: 224rpx;
    height: 224rpx;
}

.canvas {
    z-index: 1;
    width: 224rpx;
    height: 224rpx;
}

.canvas-mask {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 224rpx;
    height: 224rpx;
}

.rate {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #111;
    font-size: 40rpx;
    font-weight: bold;
    font-family: PingFang SC-Semibold;
    transform: translateY(-50%);
}
</style>
